<template>
  <div class="safety-risk-monitoring bg-background text-foreground">
    <div class="page-content p-6">
      <h1 class="text-2xl font-bold mb-6">安全风险在线监测</h1>

      <div class="bg-card text-card-foreground shadow-md rounded-lg overflow-hidden mb-6">
        <div class="p-6 space-y-6">
          <h2 class="text-xl font-semibold mb-4">危化车辆停车场</h2>
          
          <!-- Camera grid -->
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
            <div v-for="i in 9" :key="i" class="relative aspect-video bg-muted rounded-lg shadow-md overflow-hidden">
              <img :src="`/placeholder.svg?height=200&width=300&text=Camera ${i}`" alt="Camera feed" class="w-full h-full object-cover" />
              <div class="absolute top-0 left-0 w-full p-2 bg-gradient-to-b from-black to-transparent text-white text-sm">
                2024/04/04 12:00:00
              </div>
              <div class="absolute bottom-0 left-0 w-full p-2 bg-gradient-to-t from-black to-transparent text-white text-sm">
                视频{{ i }}
              </div>
            </div>
          </div>
          
          <!-- Camera controls -->
          <div class="bg-muted p-4 rounded-lg shadow-inner">
            <div class="flex flex-wrap items-start justify-between gap-6">
              <div class="bg-card text-card-foreground p-3 rounded-md shadow">
                <h3 class="font-bold text-lg mb-2">当前监控点</h3>
                <p>室内号：视频 1</p>
                <p>设备名：高清摄像机001</p>
              </div>
              <div class="flex flex-wrap gap-4">
                <div class="flex flex-col items-center bg-card text-card-foreground p-3 rounded-md shadow">
                  <span class="text-sm font-medium mb-2">缩放</span>
                  <div class="flex space-x-2">
                    <button class="btn btn-icon">+</button>
                    <button class="btn btn-icon">-</button>
                  </div>
                </div>
                <div class="flex flex-col items-center bg-card text-card-foreground p-3 rounded-md shadow">
                  <span class="text-sm font-medium mb-2">焦距</span>
                  <div class="flex space-x-2">
                    <button class="btn btn-icon">+</button>
                    <button class="btn btn-icon">-</button>
                  </div>
                </div>
                <div class="flex flex-col items-center bg-card text-card-foreground p-3 rounded-md shadow">
                  <span class="text-sm font-medium mb-2">方向控制</span>
                  <div class="flex flex-col items-center">
                    <button class="btn btn-icon mb-1">▲</button>
                    <div class="flex space-x-1">
                      <button class="btn btn-icon">◀</button>
                      <button class="btn btn-icon">●</button>
                      <button class="btn btn-icon">▶</button>
                    </div>
                    <button class="btn btn-icon mt-1">▼</button>
                  </div>
                </div>
              </div>
              <div class="w-full sm:w-64 bg-card text-card-foreground p-3 rounded-md shadow">
                <span class="text-sm font-medium block mb-2">播放速度</span>
                <input type="range" min="0.1" max="2" step="0.1" v-model="playbackSpeed" class="w-full" />
                <div class="flex justify-between text-xs mt-1">
                  <span>0.1x</span>
                  <span>0.5x</span>
                  <span>1x</span>
                  <span>1.5x</span>
                  <span>2x</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Sidebar -->
    <div class="w-64 bg-card text-card-foreground p-4 shadow-md rounded-lg">
      <input type="text" placeholder="视频名称" class="input w-full mb-4" />
      <div class="flex mb-4 space-x-2">
        <button class="btn btn-primary flex-grow">视频列表</button>
        <button class="btn btn-secondary flex-grow">气体感知监测</button>
      </div>
      <div class="overflow-y-auto max-h-[calc(100vh-200px)]">
        <div class="mb-4">
          <h3 class="font-bold flex items-center cursor-pointer hover:text-primary">
            <span class="mr-2">▼</span> 危化车辆停车场A区 (25/34)
          </h3>
          <ul class="ml-4 mt-2">
            <li v-for="i in 7" :key="i" class="flex items-center justify-between py-1">
              <span>• 视频{{ i }}</span>
              <button class="text-primary hover:text-primary/80 focus:outline-none">+</button>
            </li>
          </ul>
        </div>
        <div v-for="area in ['科技东路', '创业大道', '沙苑大道', '丰泽路', '丰收路', '兴业大道']" :key="area" class="mb-4">
          <h3 class="font-bold flex items-center cursor-pointer hover:text-primary">
            <span class="mr-2">▼</span> {{ area }} (25/34)
          </h3>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const playbackSpeed = ref(1)
</script>

<style scoped>
.input {
  @apply px-3 py-2 bg-background border border-input rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary;
}

.btn {
  @apply px-4 py-2 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-150 ease-in-out;
}

.btn-primary {
  @apply bg-primary text-primary-foreground hover:bg-primary/90;
}

.btn-secondary {
  @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
}

.btn-icon {
  @apply p-2 border border-input text-foreground bg-background hover:bg-muted focus:ring-primary rounded transition-colors duration-150 ease-in-out;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}
</style>
